<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>About-ust</title>
	<link rel="stylesheet" type="text/css" href="about-us.css">
</head>
<body>
<!-- top导航 -->
	<div class="top-bar">
		<span class="modus">MODUS</span>VERSUS
	
		<ul>
		<li><button class="search"></button></li>
		<li><a  class="top-bar-a" href="#">CONTACTS</a></li>
		<li><a class="top-bar-a"  href="#">FEATURES</a></li>
		<li><a class="top-bar-a"  href="#">BLOG</a></li>
		<li><a id="top_bar_a" class="top-bar-a" href="#" onmouseover=showDiv() onmouseout=showdown()>∨ PORTFOLIO</a>
		<div class="show-div" id="showButton">
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
			<a href="#">Portfolio 2 column page</a>
		</div>
		</li>
		<li><a  class="top-bar-a" href="#">SERVICES</a></li>
		<li><a  class="top-bar-a" href="#">ABOUT</a></li>
		<li class="home"><a href="#" >HOME</a></li>
		</ul>
		<div class="path-index"></div>
	</div>

<script type="text/javascript">
	  // 展示下拉菜单
    function showDiv(){
     var showDown =  document.getElementById("top_bar_a")
     
      var showButt = document.getElementById("showButton");
      if (showButt.style.display == "block") {
        showButt.style.display = "none";
      }
      else {
        showButt.style.display = "block";
      }
      showButt.onmouseleave = function leave(){
    
        if (showButt.style.display == "none") {
          showButt.style.display = "block";
      }else {
        showButt.style.display = "none";
      }
    } 
    }
</script>



<!-- 文字部分 -->
<div class="about-us">
	<h2>ABOUT US</h2>
	<p>Home   /   Podtfolio</p>	
</div>

<div style="width: 100%;height: 550px;background: #F3F3F3;">
<div class="dfuc">
	<h2>Donec faucibus ultricies congue</h2>
	<p>Msd b sddfb dfbh h fewf  weiufhwebvhf dh    d dvf dbhbef fbsf dsbfhe jdbce jbfhwebf cbsdbfe jefbdb fbewhfew fiwefue  uwue bewuef efbheu iwfbskdf jfwe jdfsb  jbfb  jdb elwi uj hidhubv h h weubvj i j w ejhfuvb ehf bih ewhvb fb weifhb ihewb dc fjsds sna s sajhas  sjhj  jsbd saj j s sajhdj c wef jhew  urwbe  jfjbfe ejbfwb  nfbe bfjsdhfj j ejfb jfjdb  db</p>
</div>
<div class="font-div">
	<div class="wcus">
		<h3>Why Choose Us ?</h3>
		<a href="#">➜ Qsdjei sdnKSNK KND</a>
		<a href="#">➜ Qsdjei sdnf fg KSNK KND</a>
		<a href="#">➜ Qsdjei sdnKf SNK KND</a>
		<a href="#">➜ Qsdjei sdnKS fgNK KND</a>
		<a href="#">➜ Qsdjei sdnKS NK KND</a>
		<a href="#">➜ Qsdjei sdnKS fg NK KND</a>
	</div>
	<div class="imgs">
		<p>
			dsfjn df dkfjqwo s dkjsewo cdfhsfjieyrff sjds sndhfjgf sdjfhasuiw hrg sdjk kdff akj jehrejw dfn kf ejrfhj sjdfh sdfj dknf alsauiw woixbcls w denlkwdc sidfjlwew sdk iwj dsd fsdsd dss
		</p>
		<div >
			<img src="img/50.png">
			<img src="img/70.png">
			<img src="img/80.png">
			<img src="img/100.png">
		</div>
	</div>
	<div class="font-div-h1">
		<h2>What Client's Say</h2>
		<p>Sdfdof dfjko evchao dheon dojf eojsdp jodof jfodfpwe jfeof ef eofk efoe e0rj cjdofoerj fjf ejjfef jcofje0wr-jf odfjwe0iefj lfklfgj erelk ekfd,d eldjriewk fkfgn oemkew nejoik jnk</p>
		<h3>Jhon Doe</h3>
	</div>
</div>
</div>
<!--  -->
<div style="background: #ECECEC; width: 100%;height: 400px;">
	<div class="path002"></div>
	<h1 class="our-team">
		OUR TEAM
	</h1>
	<div class="read-more">
			<div class="read-more-div susp" style="background: #fff;">
				<img src="img/大拇指.png">
				<span>SUSPENDISSE</span>
				<p>gjfkjdf sgkg kljdfofr i r eo t jdgkjd s kfjdjkc jgvkjfgkjg jkfgt ben j nfjds n nfdmnf mdk fnd  nf nd  nmdfn n dnfndf df  njdnfn njd n</p>
				<button>JION US</button>
			</div>
			<div class="read-more-div mae">
				<img src="img/钥匙.png">
				<span>MAECENAS</span>
				<p>g jfkjd sgkgklj dfofrireot jdgkj dskfjdj kcjgv kjf gkjgjk</p>
				<button>JION US</button>			
			</div>
			<div class="read-more-div ali">
				<img src="img/旗帜.png">
				<span>ALIQUAM</span>
				<p>gjf kjdsgk gkljdfo frireotjd gkjd skfjd jkcjgvk jfgkj gkm m mkm mflekr gjk</p>
				<button>JION US</button>
			</div>
			<div class="read-more-div hab"><img src="img/水晶瓶.png"><span>HABITASSE</span>
			<p>gjf kjdsgkgk ljdfofr ireotjd gkjdskfj djk cjg vkjfgk j jfdoauer erjfhjh gjk</p>
			<button>JION US</button>
			</div>
		</div>
</div>


<!-- 文字部分 -->
<div class="bsid">
	<h1>Best Solution is the simplest IDEA!</h1>
	<p>flgj dkofjewf dlmndsjfs dlsfsp mfoewfj nd neo fndfks ne fopwnd xs,cnwspkf c, relojihnf wefjo cvwepfn dsc.,pogn df.vdfk dmkfdndfg roi reog ikfgjdfp rg opfdvkl 4kegojnvc l;re0jg n,v0-ergjfvnc,.,rofjvi dofjkwer ?S okf fglk / rt k nfkgij ;we nd,cv ,x vlkodfn cmv.er;lnknfpk</p>
</div>

<!-- jquery -->
<div class="ohc">
	<div>
		<h2>Our Happy Clients</h2><img src="img/zhixian.png" class="zhixian"></div>
		<div id="buttons01">
				<i id="prev01"><img src="img/left.png" width="15px"></i>
				<i id="next01"><img src="img/right.png" width="15px"></i>
		</div>	
</div>

<div class="jquery">
	<div id="adimglist">
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>	
		</div>
		<div class="slidpic01" >
			<a href="#"><img src="img/jquery.png" width="160x" height="80px"></a>
		</div>
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>	
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>
		<div class="slidpic01">
			<a href="#"><img src="img/jquery.png" width="160px" height="80px"></a>
		</div>	
	</div>
</div>

<!-- 尾部 -->
<div class="foot">
	
	<div class="path003"></div>

	<div class="foot-cont">
			<div class="fo-co-left">
				<p><span class="modu">MODUS</span><span class="vers">VERSUS</span></p>
				<p class="mo-ver">djs fdsj fjsjbfjd sqw cifdhl sdw9jf sjsdf sjd fdpocn isdqdpos dfa fed0wjds vmnsdf sdkjosf csfei cj jwd of askdsnc e jdwsf jskfwqsa vjdfjqaxs kjsdfj </p>
				<div class="fon-sty"><p>Phone:<span>182 5648 4545</span></p>
				<p>
					e-mail:<span>info@modu.versus</span>
				</p></div>
			</div>
			<div class="fo-co-center1"><h2>Company</h2>
			<a href="#">> About</a>
			<a href="#">> FAQ</a>
			<a href="#">> Contact</a>
			<a href="#">> Terrrs</a>
			<a href="#">> Privacy</a>
			<a href="#">> Testmonials</a></div>
			<div class="fo-co-center2"><h2>Community</h2>
			<a href="#">> Blog</a>
			<a href="#">> Forum</a>
			<a href="#">> Support</a>
			<a href="#">> Newsletter</a></div>
			<div class="fo-co-right">
				<p class="from-the"><span>from the </span>BLOG</p>
				<div class="img"><img src="img/img.png"><span>sdjf dfjf osdfj sodfxcm jf mclkds mvkd</span><h6>26 May,2013</h6></div>
				<div class="img"><img src="img/img.png"><span>d vkfdjf odsf dfj vce9 vcdikvdf vdk dkf kp</span><h6>26 May,2013</h6></div>
			</div>	
	</div>
	<div class="footer">
		<p>2013 ModusVersus</p>
		<div><a href="#"><img src="img/face.png"></a>
		<a href="#"><img src="img/google.png"></a>
		<a href="#"><img src="img/ytube.png"></a>
		<a href="#"><img src="img/wifi.png"></a></div>
	</div>
</div>


</body>
</html>